<template>
  <div>
    <div class="tuwen_box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础管理" name="1">
          <el-form label-width="120px">
            <el-form-item label="公司logo">
              <el-input v-model="active_component.propValue.img"></el-input>
              <Upload
                :type="'primary'"
                :text="'点击上传logo'"
                @confrim="
                  (e) => {
                    confrim(e);
                  }
                "
              ></Upload>
            </el-form-item>
            <el-form-item label="是否固定">
              <el-switch v-model="active_component.propValue.fixed">
              </el-switch>
            </el-form-item>
            <!-- <el-form-item label="文字选中颜色">
                            <colorPicker
                                @colorConfrim="(e)=>{colorConfrim(e,'activeColor')}"
                                :color="active_component.propValue.activeColor"
                                style="margin-left: 10px"
                            ></colorPicker>
                </el-form-item> -->
            <el-form-item label="图片尺寸">
              <div class="flex">
                <div>
                  宽度(px)
                  <el-input
                    style="width: 100px"
                    v-model="active_component.propValue.imgwidth"
                    placeholder="请输入宽度"
                  ></el-input>
                </div>
                <div style="margin-left: 10px">
                  高度(px)
                  <el-input
                    style="width: 100px"
                    v-model="active_component.propValue.imgheight"
                    placeholder="请输入高度"
                  ></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="公司字体大小">
              <el-input
                v-model="active_component.propValue.companyFont"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
              <el-input
                v-model="active_component.propValue.corporateName"
              ></el-input>
            </el-form-item>
             <!-- <el-button @click="addItem" size="mini" type="primary"
                >新增主菜单</el-button
              >
            <el-table
              :data="active_component.propValue.headerList"
              style="width: 1000px; margin-bottom: 20px;margin-top: 10px;"
              row-key="name"
              border
              :tree-props="{ children: 'Children',hasChildren:'hasChildren'}"
            >
              <el-table-column prop="name" label="名称" min-width="150">
              </el-table-column>
              <el-table-column prop="link" label="链接"  >
              </el-table-column>
              <el-table-column prop="link" label="子菜单"  >
                <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.isChildren"
                        >
                        </el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="link" label="是否选中"  >
                 <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.active"
                             @change="
                                (e) => {
                                    changeCheckHeader(e, scope.$index);
                                }"
                        >
                        </el-switch>
                </template>
              </el-table-column>
               <el-table-column  label="操作" >
                <template slot-scope="scope">
                    <div>                 
                        <el-button v-if="scope.row.Children"   @click="addChildrenItem(scope.row,scope.$index)" size="small" type="primary">新增子菜单</el-button>
                    </div>
                </template>
              </el-table-column>
            </el-table> -->

            <el-form-item label="导航链接">
              <div
                v-for="(item, i) of active_component.propValue.headerList"
                :key="i"
              >
                <div class="flex">
                  <el-input v-model="item.name"></el-input>
                  <el-input v-model="item.link"></el-input>
                  <div class="close_item" @click="deleteItem(i)">
                    <i class="el-icon-circle-close"></i>
                  </div>
                </div>
                <div>
                  <el-switch
                    v-model="item.isChildren"
                    active-text="有子菜单"
                    inactive-text="无子菜单"
                  >
                  </el-switch>
                </div>
                <div>
                  <el-switch
                    v-model="item.active"
                    active-text="默认选中"
                    @change="
                      (e) => {
                        changeCheckHeader(e, i);
                      }
                    "
                    inactive-text="默认不选中"
                  >
                  </el-switch>
                </div>
                <div v-if="item.isChildren">
                  <div
                    class="flex"
                    v-for="(ptiem, p) of item.Children"
                    :key="p"
                  >
                    <el-input v-model="ptiem.name"></el-input>
                    <el-input v-model="ptiem.link"></el-input>
                    <div class="close_item" @click="deleteSubItem(i, p)">
                      <i class="el-icon-circle-close"></i>
                    </div>
                  </div>
                  <el-button
                    @click="addChildrenItem(i)"
                    size="mini"
                    type="primary"
                    >新增子菜单</el-button
                  >
                </div>
              </div>
              <el-button @click="addItem" size="mini" type="primary"
                >新增</el-button
              >
            </el-form-item>
            <el-form-item label="导航栏样式">
              <el-radio-group v-model="active_component.propValue.radioType">
                <el-radio :label="1">样式一</el-radio>
                <el-radio :label="2">样式二</el-radio>
                <el-radio :label="3">样式三</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="样式管理" name="2">
          <el-form label-width="120px">
            <!-- <el-form-item label="链接选中颜色">
                        <div class="classbgbox">
                        <div class="bgItem" @click="checkbgchange(item)" :style="{background:item.color}" v-for="(item,i)  of colorList" :key="i"></div>
                        </div>
                        <div class="flex" style="margin-top:10px;">
                            <div>当前选中</div>
                        <div class="checkItem" :style="{background:checkbg}"></div>
                        </div>
            </el-form-item> -->
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="flex-center" style="margin-top: 10px">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload from "../Upload/index.vue";
import colorPicker from "../common/colorPicker.vue";

export default {
  props: ["componentId", "componentList", "activeCompont"],
  components: { Upload, colorPicker },
  data() {
    return {
      name: "",
      tabIndex: 0,
      activeName: "1",
      active_component: {},
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },

  created() {
    if (this.activeCompont) {
      this.active_component = this.activeCompont;
    } else {
      for (let key in this.componentList) {
        if (
          this.componentList[key].isDialog &&
          this.componentList[key].propValue.value == this.componentId
        ) {
          this.active_component = JSON.parse(
            JSON.stringify(this.componentList[key])
          );
        }
      }
    }
  },

  methods: {
    // 点击上传logo
    confrim(e) {
      this.active_component.propValue.img = e;
      console.log(this.active_component.propValue.img);
    },
    colorConfrim(e, key) {
      this.active_component.propValue[key] = e;
    },
    changeCheckHeader(e, i) {
      for (let item of this.active_component.propValue.headerList) {
        item.active = false;
      }
      this.active_component.propValue.headerList[i].active = true;
    },
    deleteItem(i) {
      this.active_component.propValue.headerList.splice(i, 1);
    },
    deleteSubItem(i, p) {
      this.active_component.propValue.headerList[i].Children.splice(p, 1);
    },
    addChildrenItem(i) {
      this.active_component.propValue.headerList[i].Children.push({
                    name: "子菜单名称",
                    link: "跳转链接",
                });
        // for(let key in this.active_component.propValue.headerList){
        //     if(row.name==this.active_component.propValue.headerList[key].name&&row.link==this.active_component.propValue.headerList[key].link){
        //          this.active_component.propValue.headerList[key].Children.push({
        //             name: "子菜单名称",
        //             link: "跳转链接",
        //         });
        //     }
        // }
    },
    addItem() {
      this.active_component.propValue.headerList.push({
        name: "",
        link: "",
      });
    },

    closeTK() {
      this.$emit("closeTK");
    },

    pushcanvas() {
      if (this.activeCompont) {
        this.$emit("closeTK"); //关闭弹框
      } else {
        let canvasStyle = this.$store.state.canvasStyleData;
        let component = this.active_component;
        component.style.top = 0;
        component.style.left = 0;

        this.$store.commit("addComponent", { component: component });
        canvasStyle.height = String(
          Number(canvasStyle.height) + Number(component.style.height)
        );
        this.$store.commit("setCanvasStyle", canvasStyle);
        this.$emit("closeTK"); //关闭弹框
      }
    },
  },
};
</script>
<style>
.w-e-bar > div:nth-child(23),
.w-e-bar > div:nth-child(24) {
  display: none;
}
</style>
<style lang="scss" scoped>
.tuwen_box {
  img {
    width: 100%;
  }
}

.close_item {
  margin-left: 5px;
  cursor: pointer;
}
</style>

